<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 容器|模板 -->
    <div id="app">
        <!-- //到目前位置:VM对象有几个属性【不算Vue框架提供的】
        //computed计算属性,它主要的作用是利用已有的属性与属性值,创建出一个新的属性与属性值
       //  console.log(VM); -->
       
        请输入你的姓：<input type="text" v-model="xing">
        请输入你的名：<input type="text" v-model="ming">
        <p>这个人的全称：{{allName}}</p>
    </div>
</body>
</html>
<script>
     //关联VM
     const VM = new Vue({
         el:'#app',
         data:{
             xing:'',
             ming:''
         },
         computed:{
             allName(){
                //  console.log('1111')
                  //当新增的属性,依赖的 响应式数据 发生变化的时候,当前函数会再次执行,计算出一个新的属性值提供使用
                //注意的事件事情是:计算属性这里一般不书写异步语句
                //异步语句:延迟器、定时器、ajax等等
                //下面写法是错误的:return返回值作为定时器回调函数的返回值
                // setTimeout(() => {
                //     return this.xing + '-' + this.ming;
                // }, 1000);
                //并非是allName这个函数返回值，allName返回值还是undefined
                return this.xing + this.ming
             }
         }
     })
</script>